<div *ngFor="let item of actions; index as i" class="item">
    <flex-variable class="item-head" [data]="data" (onchange)="setVariable(i, $event)" [variableSrc]="item.variableSrc" [variableId]="item.variableId" [variable]="item.variable"></flex-variable>
    <div class="item-content">
        <div *ngIf="slideView" class="item-range">
            <div class="my-form-field">
                <span>{{'gauges.property-input-min' | translate}}</span>
                <input numberOnly [(ngModel)]="item.range.min" type="text" style="width: 80px">
            </div>
            <div class="my-form-field" style="padding-left: 20px;">
                <span>{{'gauges.property-input-max' | translate}}</span>
                <input numberOnly [(ngModel)]="item.range.max" type="text" style="width: 80px">
            </div>
        </div>
        <!-- <div class="item-range input-slider" *ngIf="!slideView">
            <ng5-slider [(value)]="item.min" [(highValue)]="item.max" [options]="options"></ng5-slider>
        </div> -->
        <div class="my-form-field" style="width: 300px;">
            <span>{{'gauges.property-action-type' | translate}}</span>
            <mat-select [(value)]="item.type">
                <mat-option *ngFor="let ev of actionType | enumToArray" [value]="ev.key">
                    {{ ev.value }}
                </mat-option>
            </mat-select>
        </div>
        <div class="item-remove">
            <button mat-icon-button (click)="onRemoveAction(i)" class="_remove">
                <mat-icon>clear</mat-icon>
            </button>
        </div>
    </div>
</div>